<template>
    <div class="dropdown" :style="{width:width+'px'}" ref="dropdown">
        <div class="drop_header" :style="myStyle" @click="openDropDown">
            <span>{{ selectText }}</span>
            <img src="../../assets/drop.png">
        </div>
        <div class="drop_content" v-show="show">
            <div
                v-for="item in subject"
                :key="item.value"
                :style="myStyle"
                :class="{disable:item.disable}"
                @click="!item.disable && selectItem(item)"
            >{{ item.text }}</div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			selectText: '',
			myStyle: {
				width: this.width + 'px',
				height: this.height + 'px',
				lineHeight: this.height + 'px'
			}
		}
	},
	props: {
		width: {
			type: Number,
			default: 80
		},
		height: {
			type: Number,
			default: 25
		},
		value: {
			type: [String, Boolean, Number]
		},
		subject: {
			type: Array,
			default() {
				return [
					{
						value: '选项一',
						text: '选项一'
					},
					{
						value: '选项二',
						text: '选项二'
					},
					{
						value: '选项三',
						text: '选项三',
						disable: true
					}
				]
			}
		},
		defaultFirst: {
			type: Boolean,
			default() {
				return true
			}
		}
	},
	mounted() {
		document.addEventListener('click', this.clickOutside)
	},
	watch: {
		value: {
			immediate: true,
			handler() {
				this.init()
			}
		}
	},
	methods: {
		init() {
			if (this.subject.length > 0 && this.subject instanceof Array) {
				if (this.value === '' || this.value == undefined || this.value == null) {
					if (this.defaultFirst) {
						this.selectText = this.subject[0].text
						this.$emit('update:value', this.subject[0].value)
					} else {
						this.selectText = '请选择'
					}
				} else {
					for (let index in this.subject) {
						if (this.subject[index].value == this.value) {
							this.selectText = this.subject[index].text
						}
					}
				}
			}
		},
		openDropDown() {
			this.show = !this.show
		},
		selectItem(item) {
			this.selectText = item.text
			this.$emit('update:value', item.value)
			if (item.disable === undefined || item.disable === true) {
				this.show = false
			}
		},
		clickOutside(event) {
			let dropdown = this.$refs.dropdown
			if (dropdown) {
				if (!dropdown.contains(event.target)) {
					this.show = false
				}
			}
		}
	}
}
</script>

<style scoped>
.drop_header {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #b8b6b6;
	text-align: center;
	border-radius: 4px;
	color: #000;
	font-size: 12px;
	cursor: pointer;
}

.drop_header > span {
	display: inline-block;
	font-size: 12px;
	text-align: center;
}

.drop_content {
	position: relative;
	z-index: 1000;
	width: 100%;
	max-height: 150px;
	overflow: auto;
}

.drop_content > div {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #b8b6b6;
	border-top: none;
	color: #000;
	font-size: 12px;
	cursor: pointer;
}

.drop_content > div:hover {
	background: rgb(39, 124, 214);
}

.drop_content > div:active {
	background: #2e2e2e;
}

.drop_content > div:focus {
	background: rgba(40, 142, 251, 1);
}
.disable {
	cursor: not-allowed !important;
	background: #afaeae !important;
}
</style>
